import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
// !图片懒加载原理：当图片进入可视区，把某一个装图片地址的属性值给图片真正的 src
// <img data-src="xxx.png" src="xxx.png"/>
export default {
  install(app) {
    app.directive('imgLazy', {
      // Vue3 指令的配置项和生命周期钩子保持一致
      // el => v-imgLazy 和谁绑定，el 就是谁
      // binding => 对象，binding.value 就是传递过来的参数
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // isIntersecting => 如果目标进入可视区啦，就是 true
          if (isIntersecting) {
            // 把传过来的地址给图片的 src
            el.src = binding.value
            // 出错了，给一个默认的图片
            el.onerror = function () {
              this.src = defaultImg
            }
            // 停止观测，后续再进入可视区，这儿也不会被触发啦
            stop()
          }
        })
      }
    })
  }
}
